<template>
    <div>{{userName}}
        <ul>
            <li v-for="(room,index) in  roomList"
                @dblclick="enterTheRoom(room)"
                :key="room.ID">
                {{room.roomName}}-{{index}}
            </li>
        </ul>
    </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
export default {
  data() {
    return {
      //   userName: localStorage.getItem('userName')
    };
  },
  methods: {
    ...mapActions(['getRoomList', 'addRoomName', 'setClientNameList']),
    enterTheRoom(room) {
      this.setClientNameList(room.roomName);
      this.$router.push({ path: '/RoomClient', name: 'RoomClient' });
    }
  },
  computed: {
    ...mapGetters({
      roomList: 'getRoomList',
      userName: 'getUser'
    })
  },
  created() {
    this.getRoomList();
  }
};
</script>

